<template>
  <view>
    <!-- 顶部图片活动信息 -->
    <view class="topImgBox">
      <view class="leftImgBox">
        <image src="/static/hotspot/bg2.png" mode="aspectFit"></image>
      </view>
      <view class="rightTextBox">
        <view class="title"> {{ pagesData.title }} </view>
        <view class="text1"> 时间：{{ pagesData.activityTime }} </view>
        <view class="text1"> 地点：{{ pagesData.activityLocation }} </view>
        <view class="text2">
          <view class="">
            <text class="priceText1">￥{{ pagesData.paymentAmount }}</text>
            <text class="priceText2">/人</text>
          </view>
          <view class="numText"> X {{ cheakList.length }}位 </view>
        </view>
      </view>
    </view>
    <!-- 参与人  价格  支付  -->
    <view class="operateBox">
      <view class="staffBox">
        <view class="staffImg" @click="gotoStaffPage()">
          <view class="staffImg-title">选择参加人</view>
          <view class="staffImg-selected">
            {{ participantInfo }}
          </view>
          <uni-icons type="right" size="16" color="#707070"></uni-icons>
        </view>
        <view class="userInfo" v-if="cheakList.length != 0">
          <view
            class="userInfoItem"
            v-for="(item, index) in cheakList"
            :key="index"
          >
            <view class="userInfoName"> {{ item.participantsName }} </view>
            <view class="userInfoNum">
              <view class="userInfoText">
                <text>身份证</text>
                <text>{{ item.participantsIdCard }}</text>
              </view>
              <view class="userInfoImg" @click="delUserList(index)">
                <image
                  src="/static/hotspot/cancel@2x.png"
                  mode="aspectFit"
                ></image>
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="priceBox">
        <view class="title"> 价格明细 </view>
        <view class="disspb">
          <view class="priceText"> 总价 </view>
          <view class="priceNum">
            ￥{{ pagesData.paymentAmount * cheakList.length }}
          </view>
        </view>
      </view>
      <view class="payImg" @click="openPayPopup">
        <view class="payImg-title">支付方式</view>
        <view class="payImg-selected">
          {{ selected.name ? selected.name : "请选择" }}
        </view>
        <uni-icons type="right" size="16" color="#707070"></uni-icons>
      </view>
    </view>
    <!-- 底部提交订单 -->
    <view class="submitBox">
      <view class="submitPrice">
        <text class="submitPrice1">总价：</text>
        <text class="submitPrice2"
          >￥{{ pagesData.paymentAmount * cheakList.length }}</text
        >
      </view>
      <!-- 提交订单 -->
      <view class="submitBtn" @click="submitOrder">
        <image
          src="/static/hotspot/tijiaodingdan@2x.png"
          mode="aspectFit"
        ></image>
      </view>
    </view>

    <!-- 支付方式选择弹窗 -->
    <PaySelectPopup
      :show="isPayPopupVisible"
      :defaultMethod="selectedPayMethod"
      @close="closePayPopup"
      @confirm="onPayMethodConfirm"
    />
  </view>
</template>

<script>
import PaySelectPopup from "@/components/PaySelectPopup.vue";
import commonMixin from "@/mixin/commonMinxin";
export default {
  mixins: [commonMixin],
  components: {
    PaySelectPopup,
  },
  data() {
    return {
      isUserInfo: true, //展示参与人信息
      cheakList: [],
      pagesData: {},

      isPayPopupVisible: false,
      selected: {},
      orderItem: {},
    };
  },
  computed: {
    participantInfo() {
      if (Array.isArray(this.cheakList) && this.cheakList.length > 0) {
        // 如果是数组并且有数据，返回第一个参与者名称或多个参与者的数量
        if (this.cheakList.length === 1) {
          return this.cheakList[0].participantsName || "已选择1人";
        } else {
          return `已选择${this.cheakList.length}人`;
        }
      } else if (this.cheakList && this.cheakList.participantsName) {
        // 如果是单个对象
        return this.cheakList.participantsName;
      } else {
        return "选择 / 新增";
      }
    },
  },
  onLoad(options) {
    this.id = options.id;
    this.getData();
  },
  onShow() {
    if (this.cheakList && this.cheakList.length > 0) {
      console.log("获取到返回的数据:", this.cheakList);
    }
  },
  methods: {
    getData() {
      uni.app.post(
        "/activity/message/details",
        {
          id: this.id,
          userId: uni.getStorageSync("userId"),
        },
        "json",
        "",
        (res) => {
          this.pagesData = res.data;
        },
      );
    },
    // 添加参与人信息
    gotoStaffPage() {
      uni.navigateTo({
        url: `/pages/hotspot/staffList?source=1&data=${JSON.stringify(this.cheakList)}`,
      });
    },
    delUserList(index) {
      this.cheakList.splice(index, 1);
    },
    submitOrder() {
      let that = this;
      // 余额支付
      if (this.selected.value == 4) {
      }
      const ids = this.cheakList.map((item) => item.id).join(",");
      uni.app.post(
        "/activity/order/consumptionPay",
        {
          id: this.id,
          payWay: this.selected.value,
          tradeInfo: ids,
          tradeNumber: this.cheakList.length,
          userId: uni.getStorageSync("userId"),
        },
        "json",
        "",
        (res) => {
          console.log(res);
          if (res.code == 2000) {
            uni.app.msg(res.message);
            setTimeout(() => {
              switch (this.selected.value) {
                case "1":
                  that.fn(res.data);
                  break;
                case "2":
                  that.fn(res.data);
                  break;
                case "4":
                  uni.navigateTo({
                    url: `/pages/hotspot/orderDetail?orderNo=${res.data.orderNo}`,
                  });
                  break;
              }
            }, 1000);
          }
        },
      );
    },

    fn(data) {
      let ddd = {
        ...data,
        jumpUrl:
          "https://www.yaozhuasocial.com/yaozhua_shequ/#/pages/hotspot/orderDetail?orderNo=" +
          data.orderNo,
        paySource: "activity",
      };
      console.log(ddd);
      switch (uni.getSystemInfoSync().platform) {
        case "android":
          let d = JSON.stringify(ddd);
          console.log(d, "都是对的");
          window.AndroidBridge.aliPayForOrderStr(d);
          console.log("运行Android上");
          break;
        case "ios":
          window.webkit.messageHandlers.aliPayForOrderStr.postMessage(ddd);
          break;
        default:
          console.log("运行在开发者工具上");
          break;
      }
    },
    openPayPopup() {
      this.isPayPopupVisible = true;
    },
    closePayPopup() {
      this.isPayPopupVisible = false;
    },
    onPayMethodConfirm(method) {
      this.selected = method;
      this.isPayPopupVisible = false;
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background-color: #f8f8f8;
  padding: 32rpx 28rpx;
}

.topImgBox {
  display: flex;

  .leftImgBox {
    margin-right: 32rpx;

    image {
      width: 284rpx;
      height: 328rpx;
      border-radius: 16rpx 16rpx 16rpx 16rpx;
    }
  }

  .rightTextBox {
    flex: 1;
    margin-right: 10rpx;

    .title {
      font-weight: bold;
      font-size: 32rpx;
      color: #303030;
      margin-bottom: 16rpx;
    }

    .text1 {
      font-weight: 400;
      font-size: 20rpx;
      color: #303030;
    }

    .text2 {
      margin-top: 48rpx;
      display: flex;
      justify-content: space-between;

      .priceText1 {
        font-weight: bold;
        font-size: 32rpx;
        color: #303030;
      }

      .priceText2 {
        font-weight: bold;
        font-size: 20rpx;
        color: #303030;
      }

      .numText {
        font-weight: bold;
        font-size: 32rpx;
        color: #303030;
      }
    }
  }
}

.operateBox {
  margin-top: 48rpx;

  .staffBox {
    border-radius: 16rpx;
    background-color: #ffffff;
    padding: 0 32rpx;

    .staffImg {
      display: flex;
      height: 80rpx;
      border-radius: 20rpx;
      background-color: #ffffff;
      align-items: center;
      justify-content: space-between;

      .staffImg-title {
        font-weight: bold;
        font-size: 28rpx;
        color: #303030;
        line-height: 40rpx;
      }

      .staffImg-selected {
        flex: 1;
        margin-right: 30rpx;
        text-align: end;
        font-weight: 400;
        font-size: 24rpx;
        color: #707070;
        line-height: 40rpx;
      }
    }

    .lineBox {
      width: 100%;
      height: 0rpx;
      margin: 0 auto;
    }

    .userInfo {
      border-bottom: 2rpx solid #f8f8f8;
      padding: 16rpx 0 22rpx;

      .userInfoItem {
        margin-bottom: 8rpx;

        .userInfoName {
          font-weight: bold;
          font-size: 28rpx;
          color: #303030;
        }

        .userInfoNum {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .userInfoText {
            font-weight: 500;
            font-size: 24rpx;
            color: #7f7f7f;

            :nth-child(1) {
              margin-right: 5rpx;
            }
          }

          .userInfoImg image {
            width: 32rpx;
            height: 32rpx;
          }
        }
      }
    }
  }

  .priceBox {
    background-color: #ffffff;
    padding: 32rpx;
    margin: 32rpx 0 32rpx;
    border-radius: 16rpx;

    .title {
      font-weight: bold;
      font-size: 28rpx;
      color: #303030;
      border-bottom: 2rpx solid #f8f8f8;
      padding-bottom: 4rpx;
      margin-bottom: 16rpx;
    }

    .disspb {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .priceText {
        font-weight: 500;
        font-size: 24rpx;
        color: #303030;
      }

      .priceNum {
        font-weight: 500;
        font-size: 24rpx;
        color: #303030;
      }
    }
  }

  .payImg {
    display: flex;
    height: 80rpx;
    padding: 0 20rpx 0 32rpx;
    border-radius: 20rpx;
    background-color: #ffffff;
    align-items: center;
    justify-content: space-between;

    .payImg-title {
      font-weight: bold;
      font-size: 28rpx;
      color: #303030;
      line-height: 40rpx;
    }

    .payImg-selected {
      flex: 1;
      margin-right: 30rpx;
      text-align: end;
      font-weight: 400;
      font-size: 24rpx;
      color: #707070;
      line-height: 40rpx;
    }
  }
}

.submitBox {
  display: flex;
  justify-content: space-between;
  position: fixed;
  /* 固定定位 */
  bottom: 0;
  /* 距离底部0 */
  left: 0;
  width: 100%;
  background: #ffffff;
  border-radius: 0rpx 0rpx 0rpx 0rpx;
  padding: 28rpx;

  .submitPrice {
    .submitPrice1 {
      font-weight: 500;
      font-size: 28rpx;
      color: #303030;
    }

    .submitPrice2 {
      font-weight: bold;
      font-size: 36rpx;
      color: #303030;
    }
  }

  .submitBtn image {
    width: 250rpx;
    height: 56rpx;
    display: block;
  }
}
</style>
